<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <div class="grid-content bg-purple">
          <el-card class="home-card">
            <div slot="header" class="clearfix"><span>应用概览</span></div>
            <div class="use-box">
              <el-row :gutter="8">
                <el-col :span="6">
                  <div class="use-item">
                    <p class="use-text">
                      <span>网关总数</span>
                      <span>在线</span>
                      <span>离线</span>
                    </p>
                    <div class="use-number">
                      <b>{{ GWObj.gw_total || 0 }}</b>
                      <b style="color: #329e32">{{ GWObj.gw_online || 0 }}</b>
                      <b style="color: red">{{ GWObj.gw_offline || 0 }}</b>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="use-item">
                    <p class="use-text"><span>终端数量</span></p>
                    <div class="use-number"><b>{{ projObj?.teCount || 0 }}</b></div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="use-item">
                    <p class="use-text"><span>遥信点数</span></p>
                    <div class="use-number"><b>{{ projObj?.yxCount || 0 }}</b></div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="use-item">
                    <p class="use-text"><span>遥测点数</span></p>
                    <div class="use-number"><b>{{ projObj?.ycCount || 0 }}</b></div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="use-item">
                    <p class="use-text"><span>遥脉点数</span></p>
                    <div class="use-number"><b>{{ projObj?.ymCount || 0 }}</b></div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="use-item">
                    <p class="use-text"><span>遥控点数</span></p>
                    <div class="use-number"><b>{{ projObj?.ykCount || 0 }}</b></div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="use-item">
                    <p class="use-text"><span>遥调点数</span></p>
                    <div class="use-number"><b>{{ projObj?.ytCount || 0 }}</b></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <div class="grid-content bg-purple">
          <el-card class="home-card">
            <div slot="header" class="clearfix"><span>服务器信息</span></div>
            <div class="system-box" style="height: 100%">
              <el-descriptions :column="1" border size="small">
                <el-descriptions-item label="服务器名称">{{ sysObj.computerName }}</el-descriptions-item>
                <el-descriptions-item label="操作系统">{{ sysObj.osName }}</el-descriptions-item>
                <el-descriptions-item label="服务器IP">{{ sysObj.computerIp }}</el-descriptions-item>
                <el-descriptions-item label="系统架构">{{ sysObj.osArch }}</el-descriptions-item>
                <el-descriptions-item label="项目路径">{{ sysObj.userDir }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :lg="8" :md="8" :sm="24" :xl="8" :xs="24">
        <div class="grid-content bg-purple">
          <el-card class="home-card">
            <div slot="header" class="clearfix"><span>内存信息</span></div>
            <div class="echars-box">
              <el-row :gutter="10">
                <el-col :span="6">
                  <div ref="pieRef2" class="pie" style="width: 100%; height: 200px">
                    <div style="font-size: 14px; margin-top: 50%">
                      <div v-if="memObj.total">内存总量:</div>
                      <b v-if="memObj.total">{{ memObj.total + "GB" }}</b>
                    </div>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div ref="pieRef1" class="pie" style="width: 100%; height: 200px"></div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :lg="8" :md="8" :sm="24" :xl="8" :xs="24">
        <div class="grid-content bg-purple">
          <el-card class="home-card">
            <div slot="header" class="clearfix"><span>CPU信息</span></div>
            <div class="echars-box">
              <el-row :gutter="10">
                <el-col :span="6">
                  <div ref="pieRef2" class="pie" style="width: 100%; height: 200px">
                    <div style="font-size: 14px; margin-top: 50%">
                      <div v-if="cpuObj.cpuNum">核心数 :</div>
                      <b>{{ cpuObj.cpuNum }}</b>
                    </div>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div ref="pieRef2" class="pie" style="width: 100%; height: 200px"></div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :lg="8" :md="8" :sm="24" :xl="8" :xs="24">
        <div class="grid-content bg-purple">
          <el-card class="home-card">
            <div slot="header" class="clearfix"><span>虚拟机信息</span></div>
            <div class="echars-box">
              <el-descriptions size="small" :column="1" border>
                <el-descriptions-item label="JVM占用的内存总数">{{ jvmObj.total + "MB" }}</el-descriptions-item>
                <el-descriptions-item label="JVM最大可用内存总数">{{ jvmObj.max + "MB" }}</el-descriptions-item>
                <el-descriptions-item label="JVM空闲内存">{{ jvmObj.free + "MB" }}</el-descriptions-item>
                <el-descriptions-item label="JDK版本">{{ jvmObj.version }}</el-descriptions-item>
                <el-descriptions-item label="JDK路径">{{ jvmObj.home }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <div class="grid-content bg-purple">
          <el-card class="home-card">
            <div slot="header" class="clearfix"><span>磁盘状态</span></div>
            <div class="echars-box">
              <yg-table :columns="columns" :height="'200'" :tableList="TableList"></yg-table>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import YgTable from "@/components/Table/YgTable.vue";
import {ElMessage} from 'element-plus'
import {setMessageCallback, publishMsg, removeMessageCallback} from "@/mqtt/index.js";
import {reactive, onMounted, onBeforeUnmount, watch, toRefs} from 'vue'
import * as echarts from 'echarts';

export default {
  name: "Home",
  components: {
    YgTable,
  },
  setup() {
    const data = reactive({
      columns: [
        {
          prop: "dirName",
          label: "盘符路径",
        },
        {
          prop: "sysTypeName",
          label: "盘符类型",
        },
        {
          prop: "typeName",
          label: "文件类型",
        },
        {
          prop: "total",
          label: "总大小",
        },
        {
          prop: "free",
          label: "剩余大小",
        },
        {
          prop: "used",
          label: "已经使用量",
        },
        {
          prop: "usage",
          label: "资源的使用率",
          formatter(row) {
            if (row.hasOwnProperty("usage")) {
              return row.usage + "%";
            } else {
              return "";
            }
          },
        },
      ],
      TableList: [],
      myChart: null,
      myChart1: null,
      sysObj: {
        computerName: "",
        computerIp: "",
        osName: "",
        osArch: "",
        userDir: "",
      },
      cpuObj: {
        cpuNum: "",
        sys: "",
        used: "",
        free: "",
      },
      jvmObj: {
        total: "",
        max: "",
        free: "",
      },
      memObj: {
        total: "",
        used: "",
        free: "",
      },
      projObj: {},
      memArray: [],
      cpuArray: [],
      GWObj: {},
      TEObj: {},
      pieRef1: null,
      pieRef2: null,
    });

    function objEqual(a, b) {
      if (Object.keys(a).length !== Object.keys(b).length) {
        return false;
      }
      for (let key in a) {
        if (b[key] === undefined) {
          return false;
        }
        if (typeof b[key] === "function" || typeof a[key] === "function") {
          throw new Error("type error");
        }
        if (typeof b[key] != typeof a[key]) {
          return false;
        }
        if (typeof a[key] === "object") {
          return objEqual(a[key], b[key]);
        }
        if (a[key] !== b[key]) {
          return false;
        }
      }
      return true;
    }

    function onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1000:
          switch (msg.funCode) {
            case 3:
              if (!msg.data) {
                return ElMessage.error(msg.retMsg)
              }
              data.sysObj = msg.data.sys;
              data.TableList = msg.data.disk;
              data.projObj = msg.data.proj;
              data.jvmObj = msg.data.jvm;
              data.cpuObj = msg.data.cpu;
              data.memObj = msg.data.mem;
              break;
            case 4:
              if (!msg.data) {
                return ElMessage.error(msg.retMsg)
              }
              data.GWObj = msg.data;
              break;
          }
          break;
        case 1007:
          switch (msg.funCode) {
            case 6:
              if (msg.retCode != 0) {
                return ElMessage.error(msg.retMsg)
              }
              data.TEObj = msg.data;
              break;
          }
        default:
          break;
      }
    }

    function testLine() {
      if (data.myChart != null && data.myChart != "" && data.myChart != undefined) {
        data.myChart.dispose(); //销毁
      }
      data.myChart = echarts.init(data.pieRef1);
      var options = {
        title: {
          text: "内存占比",
          x: "center",
          y: "bottom",
          textStyle: {
            color: "#8ECBFF",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}" + "GB" + "({d}%)",
        },
        legend: {
          top: "0%",
          left: "center",
        },
        color: ["#5c7bd9", "#329e32"],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["70%", "20%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: "{d}%",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {value: data.memObj.used, name: "已用内存"},
              {value: data.memObj.free, name: "剩余内存"},
            ],
          },
        ],
      };
      data.myChart.setOption(options);
      window.addEventListener("resize", () => {
        data.myChart.resize();
      });
    }

    function myCharPie() {
      if (data.myChart1 != null && data.myChart1 != "" && data.myChart1 != undefined) {
        data.myChart1.dispose(); //销毁
      }
      data.myChart1 = echarts.init(data.pieRef2);
      var options = {
        title: {
          text: "CPU占比",
          x: "center",
          y: "bottom",
          textStyle: {
            color: "#8ECBFF",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}({d}%)",
        },
        legend: {
          top: "0%",
          left: "center",
        },
        color: ["#5c7bd9", "#ff915a", "#329e32"],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["70%", "20%"],
            // avoidLabelOverlap: false,
            label: {
              show: true,
              // position: "center",
              formatter: "{d}%",
              // formatter: "{b}:{c}({d}%)",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {value: data.cpuObj.sys, name: "系统使用率"},
              {value: data.cpuObj.used, name: "用户使用率"},
              {value: data.cpuObj.free, name: "当前空闲率"},
            ],
          },
        ],
      };
      data.myChart1.setOption(options);
      window.addEventListener("resize", () => {
        data.myChart1.resize();
      });
    }

    // Vue 2 的 mounted 生命周期钩子
    onMounted(() => {
      setMessageCallback(onMessage);
      publishMsg({webMsgType: 1000, funCode: 3,});
      publishMsg({webMsgType: 1000, funCode: 4,});
      testLine();
      myCharPie();
    });
    watch(() => data.memObj, // 返回一个 getter 函数
        (newVal, oldVal) => {
          if (!objEqual(newVal, oldVal)) {
            testLine();
          }
        },
        {deep: true} // 深度监听
    );
    watch(() => data.cpuObj, // 返回一个 getter 函数
        (newVal, oldVal) => {
          if (!objEqual(newVal, oldVal)) {
            myCharPie();
          }
        },
        {deep: true} // 深度监听
    );
    // Vue 2 的 destroyed 生命周期钩子
    onBeforeUnmount(() => {
      removeMessageCallback(onMessage);
    });
    // 返回需要暴露给模板的响应式状态或其他值
    return {
      ...toRefs(data),
      onMessage,
    };
  },
};
</script>
<style scoped lang="scss">
.home {
  margin-top: -10px;
}

::v-deep .el-col {
  height: 100%;
}

.bg-purple-dark {
  background: pink;
}

.bg-purple {
  background: red;
  border-radius: 5px;
}

.bg-purple-light {
  background: green;
}

.grid-content {
  min-height: 36px;
  margin-top: 10px;
}

::v-deep .home-card {
  height: 264px;

  .el-card__header {
    padding: 5px 15px;
  }
}

.app-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .app-item {
    .img {
      width: 60px;
      height: 60px;
      background-color: rgba(235, 235, 235, 1);

      img {
        margin: 10px;
      }
    }

    .text {
      text-align: center;
      font-weight: 600;
    }
  }
}

.use-box {
  width: 100%;
  margin-top: -7px;

  .use-item {
    width: 100%;
    background-color: rgba(235, 235, 235, 1);
    padding: 10px 0px;
    margin-top: 10px;

    .use-text {
      margin: 0;
      display: flex;
      justify-content: space-around;
      color: rgba(145, 142, 142, 0.959);
    }

    .use-number {
      display: flex;
      justify-content: space-around;

      b {
        font-size: 27px;
        color: #299cf0;
      }

      .el-progress {
        margin-top: 15px;
      }
    }
  }
}

.echars-box {
  height: 200px;
}
</style>
